<template>
    <div class="rostering">
        <div class="sousuo">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" @keyup.enter.native="queryDoc"
                      v-model.trim="searchData"></el-input>
        </div>
        <el-table :data="doctable==null?doctable:doctable.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  style="width: 60%" class="table">
            <el-table-column prop="account" label="编号" width="180"></el-table-column>
            <el-table-column prop="username" label="姓名" width="180"></el-table-column>
            <el-table-column prop="department" label="科室" width="180"></el-table-column>
            <el-table-column prop="" label="操作" width="180">
                <template class="" slot-scope="scope">
                    <el-button round type="success" size="small"
                               @click="rosteringDoc(scope.row.account,scope.row.username)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination" style="margin-top:15px;margin-left:350px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[3, 5, 10]"
                :page-size="pagesize"
                layout="prev, pager, next,jumper"
                :total="doctable==null?0:doctable.length">
            </el-pagination>
        </div>
        <div class="concrete">
            <RosteringConcrete :currentaccount="currentaccount" :currentname="currentname" :scheduleData="scheduleData" :newscheduleData="newscheduleData"
                               :monday="monday" :tuesday="tuesday" :wednesday="wednesday" :thursday="thursday"
                               :friday="friday" :saturday="saturday" :sunday="sunday"></RosteringConcrete>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import RosteringConcrete from '@/views/RosteringConcrete.vue'

export default {
    data() {
        return {
            doctable: [],//检索到的所有医生信息
            searchData: "",//搜索框内容
            currentPage: 1,
            pagesize: 5,
            currentaccount: "",
            currentname: "",
            monday: "",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            scheduleData: {},
            newscheduleData:[]
        };
    },
    components: {
        RosteringConcrete
    },
    mounted() {
        this.queryDoc();
    },
    computed: {
        fuzzyQuery() {
            var that = this;
            console.log("调用了fuzzyQuery" + that.searchData);
            this.queryDoc();
        }

    },
    methods: {
        queryDoc() {
            var that = this;
            if (that.searchData == "") {
                axios
                    .post("http://localhost:8848/rosteringManage/rostering")
                    .then(function (response) {
                        //   console.log(response);
                        that.doctable = response.data.data;
                    });
            } else {
                axios
                    .post("http://localhost:8848/rosteringManage/fuzzyQuery", {
                        account: that.searchData,
                        username: that.searchData,
                        department: that.searchData
                    })
                    .then(function (response) {
                        //   console.log(response);
                        that.doctable = response.data.data;
                    });
            }


        },
        async rosteringDoc(account, username) {
            var concrete = document.querySelector(".concrete");
            concrete.style.display = "block";
            this.currentaccount = account;
            this.currentname = username;
            //请求某医生周一状况
            var that = this;
            await axios
                .post("http://localhost:8848/rosteringManage/mondayoptions", {
                    account: that.currentaccount
                })
                .then(function (response) {
                    console.log(response);
                    // console.log("data:"+response.data.data);
                    // console.log("monday:"+response.data.data[0].monday);
                    that.monday = response.data.data[0].monday;
                    that.tuesday = response.data.data[0].tuesday;
                    that.wednesday = response.data.data[0].wednesday;
                    that.thursday = response.data.data[0].thursday;
                    that.friday = response.data.data[0].friday;
                    that.saturday = response.data.data[0].saturday;
                    that.sunday = response.data.data[0].sunday;
                    that.$store.state.monday = that.monday;
                    that.$store.state.tuesday = that.tuesday;
                    that.$store.state.wednesday = that.wednesday;
                    that.$store.state.thursday = that.thursday;
                    that.$store.state.friday = that.friday;
                    that.$store.state.saturday = that.saturday;
                    that.$store.state.sunday = that.sunday;
                });

            //两周的工作状态
            await axios
                .post("http://localhost:8848/rosteringManage/queryweekly", {
                    account: that.currentaccount
                })
                .then(function (response) {
                    console.log(response);
                    // console.log("week1" + response.data.data[0]);
                    // let index=response.data.data[0].findIndex(item=>item=)
                    // console.log();
                    that.scheduleData = response.data.data[0];
                    // console.log(response.data.data[0].thisweek1);
                    that.newscheduleData=[
                        {"thisweek1":response.data.data[0].thisweek1},
                        {"thisweek2":response.data.data[0].thisweek2},
                        {"thisweek3":response.data.data[0].thisweek3},
                        {"thisweek4":response.data.data[0].thisweek4},
                        {"thisweek5":response.data.data[0].thisweek5},
                        {"thisweek6":response.data.data[0].thisweek6},
                        {"thisweek7":response.data.data[0].thisweek7},
                        {"nextweek1":response.data.data[0].nextweek1},
                        {"nextweek2":response.data.data[0].nextweek2},
                        {"nextweek3":response.data.data[0].thisweek3},
                        {"nextweek4":response.data.data[0].thisweek4},
                        {"nextweek5":response.data.data[0].thisweek5},
                        {"nextweek6":response.data.data[0].thisweek6},
                        {"nextweek7":response.data.data[0].thisweek7},
                    ]
                })
        },
        handleSizeChange(val) {
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
    }
};
</script>

<style scoped>
* {
    padding: 0;
    overflow-y: hidden;
}

.rostering {
    margin-left: 10%;
    position: relative;
    height: 500px;
}

.sousuo {
    z-index: 1;
    width: 250px;
    position: absolute;
    right: 48%;
    top: 30px;
}

.table {
    margin-top: 8%;
}

.concrete {
    display: none;
    position: absolute;
    width: 520px;
    height: 420px;
    margin-left: 60%;
    top: 30px;
    /* background-color: lightcoral; */
}
</style>
